<template lang="html">
  <div class="shezhi_page">
    <div class="top_blank">
      <span @click="back()"><</span>
      <h3>{{ titles }}</h3>
    </div>
    <div class="middle_blank">
      <img src="../../static/logo.png" alt="">
      <div class="middle_blank_a">
        <p>凯撒旅游</p>
        <p>V5.5.0</p>
      </div>
    </div>
    <div class="bottom_blank">
      <ul>
        <li>
          <img src="../../static/gerencenter.png" alt="">
          <span>个人资料</span>
          <label>></label>
        </li>
        <li @click="change_pass()">
          <img src="../../static/shezhi_pass.png" alt="">
          <span>修改密码</span>
          <label>></label>
        </li>
        <li>
          <img src="../../static/about.png" alt="">
          <span>关于凯撒</span>
          <label>></label>
        </li>
        <li>
          <img src="../../static/lj.png" alt="">
          <span>清理缓存</span>
          <label>></label>
        </li>
        <li>
          <img src="../../static/banben.png" alt="">
          <span>检查版本 V5.0.0</span>
          <label>></label>
        </li>
      </ul>
    </div>
    <span @click="backzcdl()" class="dengluBtn">退出当前账号</span>
    <div class="luchukuai"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      titles:'设置'
    }
  },
  methods:{
    back(){
      history.back()
    },
    backzcdl(){
      window.localStorage.removeItem('user');
      // this.$router.push({name:'mine'});
      this.$router.push({name:'one'});
    },
    change_pass(){
      this.$router.push({name:'find'})
    }
  }
}
</script>

<style lang="css">
.luchukuai{
  width: 100%;
  height: 53px;
}
.dengluBtn{
  color: white;
  line-height: 2.5rem;
  background: #00b0ec;
  display: inline-block;
  height: 2.5rem;
  width: 90%;
  border-radius: .5rem;
  margin-top: 10px;
}
.bottom_blank>ul>li>img{
  width: 2.5rem;
  height: 2.5rem;
}
.bottom_blank>ul{
  width: 100%;
  margin-top: 10px;
}
.bottom_blank li{
  height: 4rem;
  width: 100%;
  border-bottom: 1px solid lightgray;
}
.bottom_blank img{
  float: left;
  vertical-align: middle;
  margin-top: .75rem;
}
.bottom_blank span{
  display: inline-block;
  width: 60%;
  font-size: 1.5rem;
  line-height: 4rem;
  text-align: left;
  float: left;
  margin-left: 1rem;
}
.bottom_blank label{
  float: right;
  font-size: 1.5rem;
  line-height: 4rem;
  margin-right: 1rem;
}
.middle_blank{
  width: 100%;
  height: 150px;
  background-color: #00b0ec;
}
.middle_blank_a{
  float: left;
  width: 60%;
  margin-top: 60px;
}
.middle_blank_a>p{
  height: 20px;
  width: 50%;
  font-size: 1.5rem;
  color: white;
  margin-top: 5px;
}
.middle_blank>img{
  margin-left: 30px;
  margin-top: 50px;
  width: 6rem;
  height: 6rem;
  vertical-align: middle;
  float:left;
}
.top_blank{
  background-color: #00b0ec;
  text-align: center;
  color: white;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.5rem;
}
.top_blank>h3{
  display: inline-block;
}
.top_blank>span{
  float: left;
}
</style>
